<template>
	<view class="route-shop">
		<view class="inner">
			<!-- <view class="header" :style="{'height':(totalHeight||50)+'px','padding-top':statusBarHeightRef+'px'}">
				商城
			</view> -->
			<view class="conent">
				<view class="left">
					<scroll-view scroll-y="true" class="left-content">
						<view @click="handleCheckActive(item.id)"
							:class="`left-item ${activeId===item.id?'active':''}` " v-for="(item,index) in goodsList"
							:key="item.id">
							<view class="item-text">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="right">
					<scroll-view scroll-y="true" class="rightcont">
						<view class="right-item">
							<view class="">
							</view>
							<view class="pro-cont">
								<view @click="handleGoDetail(item)" v-for="(item,index) in rightList" :key="index"
									class="one-package">
									<image :src="item.image" mode="aspectFill" class="package-img"></image>
									<view class="package-info">
										<view class="package-name">{{item.name}}</view>
										<view class="package-price">
											<view>{{item.price}} 元</view>
											<view>选规格</view>
										</view>
									</view>

								</view>
								<!-- 	<view class="pro-item" @click="handleGoDetail(item)" v-for="(item,index) in rightList">
									<view class="img-cont">
										<image class="img" :src="item.image" mode="aspectFill"></image>
									</view>
									<view class="bot">
										<view class="name">
											{{item.name}}
										</view>
										<view class="price">
											￥{{item.price}}
										</view>
									</view>
								</view> -->
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<Tabbar :slectIndex="2"></Tabbar>
		<u-popup :show="showPop" :round="10" closeable :closeOnClickOverlay="true" @close="handleClosePop">
			<view class="popCont">
				<view :scroll-y="true" :scroll-x="false" class="cont-box">
					<view class="top">
						<view class="img-cont">
							<image class="img" :src="goodsInfo.image" mode=""></image>
						</view>
						<view class="info">
							<view class="name">
								{{goodsInfo.name}}
							</view>
							<view class="price">
								<view class="unit">
									￥
								</view>
								<view class="val">
									{{activeInfo.price}}
								</view>
							</view>
						</view>
					</view>

					<view class="typeList">
						<view @click="handleCheckActiveSpec(item)"
							:class="`typeItem ${activeInfo.id===item.id?'active':''}`"
							v-for="(item,index) in goodsInfo.List">
							{{item.name}}
						</view>
					</view>

					<view class="middle">
						<view class="text">
							数量
						</view>
						<view class="num">
							<u-number-box button-size="26" integer :min="1" v-model="num"></u-number-box>
						</view>
					</view>
				</view>

				<view class="popFooter">
					<view class="btn jia" @click="handleAddCar">
						加入购物车
					</view>
					<view class="btn mai" @click="handleBuy">
						立即购买
					</view>
				</view>
			</view>
		</u-popup>
		<view class="shopcar">
			<view class="shopcarnum">{{goodscarnum>99?'...':goodscarnum}}</view>
			<image @click="handleGoCar" src="/static/images/shopcar.png" mode="widthFix"
				style="width: 100rpx;height: 100rpx;"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import handleCache from "@/utils/cache.js"
	import formatNumber from '@/utils/formatNumber.js'
	import Tabbar from '@/components/tabbar/tabbar.vue'
	import {
		goodsApi
	} from '@/api/index.js'
	const totalHeight = ref(0)
	const statusBarHeightRef = ref(0)
	const goodsList = ref([])
	const activeId = ref('')
	const showPop = ref(false)
	const goodsInfo = ref('')
	const activeInfo = ref('')
	const list1 = ref([])
	const num = ref(1)
	const goodscarnum = ref(0)
	const userInfo = ref('')
	const goodsId = ref('')

	onLoad(() => {
		//#ifndef H5
		uni.getSystemInfo({
			success: res => {
				let menu = uni.getMenuButtonBoundingClientRect()
				let statusBarHeight = res.statusBarHeight
				let menuHeight = menu.height
				let menuTop = menu.top
				let navigatorHeight = (menu.top - res.statusBarHeight) * 2 + menu.height
				totalHeight.value = statusBarHeight + navigatorHeight
				statusBarHeightRef.value = statusBarHeight

			}
		})
		//#endif

	})
	onShow(() => {
		userInfo.value = handleCache.get('userInfo')
		goodsApi.goodsList({
			shanghuid: handleCache.get('userInfo').shanghuid || 1
		}, {
			loading: {
				text: '加载中'
			}
		}).then((res) => {
			let data = res.data
			goodsList.value = data
			activeId.value = data?.length ? data[0].id : ''
		})
		getGoodCartNum()
	})

	const handleGoCar = () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return
		}
		uni.navigateTo({
			url: '/pages/car/car'
		})
	}

	const rightList = computed(() => {
		let data = []
		if (goodsList.value.length) {
			goodsList.value.forEach((item) => {
				if (item.id === activeId.value) {
					data = item.List || []
				}
			})
		}

		return data
	})
	const handleCheckActive = (id) => {
		if (id === activeId.value) {
			return
		}
		activeId.value = id
	}
	const handleCheckActiveSpec = (data) => {
		if (activeInfo.value.id === data.id) {
			return
		}
		num.value = 1
		activeInfo.value = data

	}
	const handleGoDetail = (data) => {
		// uni.navigateTo({
		// 	url: '/pages/gooddetail/gooddetail?id=' + data.id
		// })


		goodsApi.goodinfo({
			goodid: data.id
		}, {
			loading: {
				text: '加载中'
			}
		}).then((res) => {
			goodsId.value = Number(res.data.id)
			goodsInfo.value = res.data
			list1.value = [res.data.image]
			if (goodsInfo.value.List && goodsInfo.value.List.length) {
				activeInfo.value = goodsInfo.value.List[0]
			} else {
				activeInfo.value = res.data
			}
		})

		// goodsInfo.value = data
		// list1.value = [data.image]
		// if (goodsInfo.value.List && goodsInfo.value.List.length) {
		// 	activeInfo.value = goodsInfo.value.List[0]
		// } else {
		// 	activeInfo.value = data
		// }
		// goodsId.value = Number(data.id)
		showPop.value = true
	}
	const handleClosePop = () => {
		showPop.value = false
		num.value = 1
	}
	const getGoodCartNum = () => {
		goodsApi.userGoodCarNum({
			uid: userInfo.value.id,
			shanghuid: userInfo.value.shanghuid
		}).then(res => {
			goodscarnum.value = res.data
		})
	}
	const handleAddCar = async () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return
		}
		let req = {
			goodid: goodsId.value,
			uid: userInfo.value.id,
			num: num.value,
			guigeid: activeInfo.value.id,
			guige: activeInfo.value.name,
			shanghuid: userInfo.value.shanghuid
		}
		let {
			code,
			data
		} = await goodsApi.goodcartadd(req, {
			loading: {
				text: '请稍等'
			}
		})
		if (code === 0) {
			handleClosePop()
			uni.showToast({
				icon: 'none',
				title: '加入成功'
			})
			getGoodCartNum()
		}
	}
	const handleBuy = async () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return
		}
		let req = {
			goodid: goodsId.value,
			uid: userInfo.value.id,
			num: num.value,
			guigeid: activeInfo.value.id,
			guige: activeInfo.value.name,
			shanghuid: userInfo.value.shanghuid
		}
		let {
			code,
			data
		} = await goodsApi.cartbuy(req, {
			loading: {
				text: '请稍等'
			}
		})

		if (code === 0) {
			uni.navigateTo({
				url: '/pages/playorder/playorder?carId=' + data
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss'
</style>